<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      :title="popupTitle"
      :async="true"
      width="50vw"
      @confirm="handleSubmit"
      @close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="150px"
        :rules="formRules"
      >
        <el-form-item label="优惠券名称" prop="name" >
          <el-input v-model="formData.name" placeholder="请输入优惠券名称" />
        </el-form-item>
		<el-form-item label="所属分类">
		    <el-select class="w-[200px]" v-model="formData.cateids" clearable>
		        <template v-for="item in cateList">
		            <el-option :value="item.id" :label="item.name">{{item.name}}</el-option>
		        </template>
		    </el-select>
		</el-form-item>
		<el-form-item label="券类型">
		    <el-select class="w-[200px]" v-model="formData.is_reg" clearable>
		        <template v-for="item in gradeList">
		            <el-option :value="item.id" :label="item.name">{{item.name}}</el-option>
		        </template>
		    </el-select>
		</el-form-item>
		<el-form-item label="兑换商品选择" v-if="formData.is_reg==3">
		    <el-radio-group v-model="formData.goods_ids">
				<template v-for="item in fenList">
					<el-radio :label="item.id">{{item.name}}</el-radio>
				</template>
		    </el-radio-group>
		</el-form-item>
        <el-form-item label="优惠券金额" prop="price">
          <el-input-number v-model="formData.price" :precision="2" :step="0.1" controls-position="right"/>
        </el-form-item>
		<el-form-item label="优惠券满多少可用" prop="full_price">
		  <el-input-number v-model="formData.full_price" :precision="2" :step="0.1" controls-position="right"/>
		</el-form-item>
		<el-form-item label="有效期 / 天" prop="day">
		  <el-input-number  v-model="formData.day"  :step="1" controls-position="right"/>
		</el-form-item>
		<el-form-item label="限领数量(0不限制)" prop="limited">
		  <el-input-number v-model="formData.limited" :step="1" controls-position="right"/>
		</el-form-item>
		<el-form-item label="优惠券描述" prop="remark" >
		  <el-input v-model="formData.remark" type="textarea"  placeholder="请输入描述" />
		</el-form-item>
      </el-form>
    </popup>
  </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from "element-plus";
import {
detailCoupon,editCoupon,addCoupon,couponGoods,couponType
} from "@/api/consumer";
import Popup from "@/components/popup/index.vue";
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");
const popupTitle = computed(() => {
  return mode.value == "edit" ? "编辑优惠券" : "新增优惠券";
});
const formData = reactive({
  coupon_id: "",
  name: "",
  price:0,
  full_price:0,
  day:0,
  limited:0,
  is_reg:'',
  cateids:'',
  remark:'',
  goods_ids:''
});
const formRules = {
    name: [
        {
            required: true,
            message: '请输入优惠券名称',
            trigger: 'blur'
        }
    ]
}
const open = (type = "add") => {
  mode.value = type;
  popupRef.value?.open();
};

const setFormData = (data:any[]) => {
  for (const key in formData) {
      if (data[key] != null && data[key] != undefined) {
		  if (['price', 'full_price', 'day','limited'].includes(key)) {data[key] = Number(data[key])}
          formData[key] = data[key]
      }
  }
};
const gradeList = ref([]);
couponType({}).then((res) => {
	gradeList.value = res.list.map((_res: any) => {
		return {id: _res.id, name: _res.name}
	})
});
const cateList = ref([]);
const fenList = ref([]);
couponGoods({}).then((res) => {
	fenList.value = res.list.map((_res: any) => {
		return {id: _res.id, name: _res.name}
	})
	cateList.value = res.cate.map((_res: any) => {
		return {id: _res.ids, name: _res.name}
	})
});

const getDetail = async (row: Record<string, any>) => {
  const data = await detailCoupon({
    coupon_id: row.id,
  });
  formData.coupon_id = row.id
  setFormData(data.info);
};

const handleClose = () => {
  emit("close");
};

defineExpose({
  open,
  setFormData,
  getDetail,
});
//提交
const handleSubmit = async () => {
	// formData.rank_id = formData.id
  await formRef.value?.validate();
  if(mode.value=='add'){
	  await addCoupon(formData)
  }else{
	  await editCoupon(formData)
  }
  
  popupRef.value?.close();
  emit("success");
};
</script>
